﻿<?php
	use yii\helpers\url;

?>
<style type="text/css">
	.error{
		font-size:14px;
		color:red;
	}
</style>
<form method="post" action="">
<div style="margin:30px auto">
	<!--用户名-->
	<div class="input-group input-group-lg" style="margin-bottom: 20px;">
		<span class=" input-group-addon "><span class="glyphicon glyphicon-user"></span></span>
		<input type="text" class="form-control " id="user" placeholder="email or phone-number"></input>
	</div>
	<!--密码-->
	<div class="input-group input-group-lg" style="margin-bottom: 20px;">
		<span class=" input-group-addon "><span class="glyphicon glyphicon-pencil"></span></span>
		<input type="password" class="form-control" placeholder="password" id="pswd"></input>
	</div>
	<!--验证码-->

	<div style="display: table;width:100%;margin-bottom: 15px;">
		<div style="display: table-cell;padding: 0px">
			<div class="input-group input-group-lg" style="float: left">
			<span class=" input-group-addon "><span class="glyphicon glyphicon-sort-by-alphabet"></span></span>
			<input type="password" class="form-control" placeholder="verify data" id="pswd"></input>
			</div>
		</div>
		<div style="display: table-cell;padding: 0px">
		<img src="" width="80px" height="40px" style="float: left;">
			
		</div>
	</div>

	
	<!--登录注册按钮-->
	<div>
		<center>
		<input type="submit" class="btn btn-success btn-lg" style="width:100px;" value="登陆"></input>
		<button type="button" class="btn btn-default btn-lg" style="width:100px;" data-toggle="modal" data-target="#myModal">注册</button>
		</center>
	</div>
	
</div>
</form>
	
<!--modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">注册</h4>
      </div>
      <div class="modal-body">
          <!--手机号码-->
          <div class="input-group input-group-lg" >
            <span class=" input-group-addon "><span class="glyphicon glyphicon-earphone"></span></span>
            <input type="text" class="form-control " id="phone_number"  placeholder="phone-number"></input>
          </div>
          <div class="error" id="phone_error">
          	 &nbsp;
          </div>
          <!--验证码-->
          <div style="display: table;width: 100%;">
              <div style="display: table-cell;width: 100%">
                  <div class="input-group input-group-lg" style="float: left;">
                    <span class=" input-group-addon "><span class="glyphicon glyphicon-pencil"></span></span>
                    <input type="text" class="form-control " id="validata" placeholder="validata"></input>                
                  </div>
              </div>
              <div style="display: table-cell;">
                <div style=" margin-left:10px;float: left;"><button class="btn btn-info btn-lg" id="get_phone_validata">获取验证码</button></div>
              </div> 
          </div>          
         </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div> 

<script type="text/javascript">
	var flag=false;
	function ajax(){
		$.ajax({
	            type: "post",
	            url: "<?php echo url::to(['check_phone'])?>",
	            data: {phone_number:$('#phone_number').val()},
	            dataType: "json",
	            success: function(data){
	               if(data==true){
		               flag=true;           
	               }
	               else{
		               flag=false;
		               $('#phone_error').html(data);
	               }
	            }        
         	});
	}
	$(document).ready(function(){
		$('#get_phone_validata').on('click',function(){
			if(flag==false){
				ajax();
			}	
			if(flag==true){
				//给验证码而且关按钮60s
				
			}
		});
		$('#phone_number').on('blur',function(){
			ajax();
		});
	});

</script>
